<template>
	<a-card>
		<a-form layout="inline" :model="formState">
			<a-form-item label="分组名称">
				<a-tree-select v-model:value="formState.pid" show-search
					@select="selectTreePid"
					:dropdownMatchSelectWidth="false"
					style="width:200px"
					:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="请输入分组名称" allow-clear
					tree-default-expand-all :tree-data="treeData" :replaceFields="replaceFields"
					tree-node-filter-prop="label">
				</a-tree-select>
			</a-form-item>
			<a-form-item>
				<a-button  style="margin-right: 8px" class="searchButton" type="primary" html-type="submit" @click="init">
					查询
				</a-button>
				<a-button class="editable-add-btn"  type="primary" @click="addOpen = true">新增</a-button>
			</a-form-item>
		</a-form>

		<a-table
			v-if="tabledata.length"
			:defaultExpandAllRows="true"
		:scroll="{ x: 400 }" :expandRowByClick="true" :pagination="false" childrenColumnName="child" ref="table"  :row-key="(record) => record.group_id"   :columns="columns" :data-source="tabledata">
			<template #expandIcon="prop" >
				<span v-if="prop && prop.record.child && prop.record.child.length > 0">
					<down-outlined v-if="prop.expanded "/>
					<up-outlined v-else/>
				</span>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.key === 'action'">
					<a-button type="link" @click="addOpenclick(record)">新增</a-button>
					<a-button type="link" @click="editOpenclick(record)">编辑</a-button>
					<a-popconfirm title="确定要删除该数据" ok-text="确定" cancel-text="取消" @confirm="deleteConfirm(record)">
						<a-button type="link" style="color: red;">删除</a-button>
					</a-popconfirm>

				</template>
			</template>
		</a-table>
		<a-drawer v-model:visible="addOpen" class="custom-class" :root-style="{ color: 'blue' }" style="color: red"
			title="新增" placement="right">
			<a-form :model="addFormData">
				<a-form-item label="分组名称">
					<a-input v-model:value="addFormData.name" placeholder="请输入分组名称">
					</a-input>
				</a-form-item>
				<a-form-item>
				</a-form-item>
			</a-form>
			<template #footer>
				<a-button style="margin-right: 8px" @click="addOpen = false">取消</a-button>
				<a-button type="primary" @click="handleAdd">提交</a-button>
			</template>
		</a-drawer>
		<a-drawer v-model:visible="editOpen" class="custom-class" :root-style="{ color: 'blue' }" style="color: red"
			title="编辑" placement="right">
			<a-form :model="addFormData">
				<a-form-item label="分组名称">
					<a-input v-model:value="addFormData.name" placeholder="请输入分组名称">
					</a-input>
				</a-form-item>
				<a-form-item>
				</a-form-item>
			</a-form>
			<template #footer>
				<a-button style="margin-right: 8px" @click="editOpen = false">取消</a-button>
				<a-button type="primary" @click="handleedit">提交</a-button>
			</template>
		</a-drawer>
	</a-card>
</template>

<script>
import groupJsApi from '@/api/auth/group';
import { notification, message } from 'ant-design-vue'
export default {
	name: 'Other',
	data() {
		return {
			gData: [],
			addOpen: false,
			addFormData: {},
			editOpen: false,
			formState: {},
			replaceFields: {
				children: 'child', label: 'name', key: 'group_id', value: 'group_id'
			},
			treeData:[],
			rowSelection : {
				onChange: (selectedRowKeys, selectedRows) => {
					console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
				},
				onSelect: (record, selected, selectedRows) => {
					console.log(record, selected, selectedRows);
				},
				onSelectAll: (selected, selectedRows, changeRows) => {
					console.log(selected, selectedRows, changeRows);
				},
			},
			fieldNames: {
				children: 'child',
				key: 'group_id',
				title: 'name',
			},
			columns: [
				{
					title: '分组名称',
					dataIndex: 'name',
					key: 'name',
				},
				{
					title: '操作',
					dataIndex: 'action',
					key: 'action',
					align:'center',
					width:'220px'
				},
			],
			tabledata: []
		}
	},
	created() {
		groupJsApi.groupTree({ pid: 0 }).then(res => {
				this.treeData = res
		})
		this.init()
	},
	methods: {
		selectTreePid(val){
			if(val){
				this.formState.pid = val
			}else {
				this.formState.pid = 0
			}

		},
		init() {
			if(this.formState && this.formState.pid){
				groupJsApi.groupTree({ pid: this.formState.pid }).then(res => {
					this.tabledata = res
				})
			}else {
				groupJsApi.groupTree({ pid: 0 }).then(res => {
				this.tabledata = res
			})

			}
		},
		clicktree(selectedKeys) {
			this.formState.pid = selectedKeys[0]
			this.addFormData.pid = selectedKeys[0]
		},
		handleAdd() {
			if (this.addFormData && !this.addFormData.name) {
				notification['error']({
					message: '分组名称不能为空！',
				});
				return
			}
			groupJsApi.groupAdd(this.addFormData).then(res => {
				this.addOpen = false
				this.addFormData = {}
				this.init()
			})
		},
		deleteConfirm(record) {
			groupJsApi.groupDel({ id: record.group_id }).then(res => {
				this.formState = {}
				message.success('删除成功')
				this.init()
			})

		},
		editOpenclick(record) {
			this.addFormData = record
			this.editOpen = true
		},
		addOpenclick(record) {
			this.addFormData.pid = record.group_id
			this.addOpen = true
		},
		handleedit() {
			if (this.addFormData && !this.addFormData.name) {
				notification['error']({
					message: '分组名称不能为空！',
				});
				return
			}
			groupJsApi.groupEdit(this.addFormData).then(res => {
				this.editOpen = false
				this.addFormData = {}
				this.init()
			})
		}
	}
}
</script>
<style lang="less" scoped>
	@import '../index.less';
</style>
